<template>
    <el-container  class="login-container">
        <div class="btn"> <el-button class="show-account" type="text" @click="accountTip">提示帐号信息</el-button></div>
        <div class="login-box">
    <div class="login-logo">
      <img src="../../assets/logo.jpg" />
    </div>
    <div class="title">销售代理管理系统</div>
    <div class="input-box">
      <input type="text" v-model="username" placeholder="请输入用户名" />
      <input type="password" v-model="password" placeholder="请输入密码" />
      <div class="identifying-box">
        <input
          type="number"
          v-model="identifying"
          placeholder="请输入验证码
          "
        />
      </div>
        
    </div>
    <button class="login-btn" @click="submit">登录</button>
  
  </div>
    
  </el-container>
  
</template>

<script>
import {apiDengluUser} from "../../api/user"
export default {
  name:"login",
  data() {
    return {
      username: "",
      password: "",
      identifying: "",
    };
  },
  mounted() {
    this.accountTip()
  },
  methods: {
    submit() {
      if (!this.username || !this.password) {
        alert("用户名或密码不能为空");
        return;
      }
      if (this.password.length < 6) {
        alert("密码长度不能小于6位");
        return;
      }
      apiDengluUser({
         username: this.username,
         password: this.password,
      }).then((res) => {
            console.log(res);
            // this.$router.push({ path: '/provincialsales' });
            this.$message({ message: '登录成功', type: 'success' ,duration:1000 });
            localStorage.userInfo=JSON.stringify(res.reslut)
            setTimeout(()=>{
              this.$router.push({path: '/provincialsales'})
            },1000)
      });
    },
     accountTip() {
      this.$notify({
        title: '账号：admin02',
        dangerouslyUseHTMLString: true,
        message: '<strong>密码：<i>123456</i></strong>',
        type: 'success',
        position: 'bottom-left'
      })
      this.$notify({
        title: '账号：admin01',
        dangerouslyUseHTMLString: true,
        message: '<strong>密码：<i>123456</i></strong>',
        type: 'success',
        position: 'bottom-left',
        offset: 80
      })
    }
  },
};
</script>

<style lang="less" scoped>
 .login-container{
       position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../../assets/login_bg.png") no-repeat;
    background-size: cover;
    overflow: hidden;
 }
img {
  width: inherit;
  height: inherit;
}
.title {
  font-size: 30px;
  margin-bottom: 20px;
}
.login-logo {
  margin: 0 auto;
  height: 80px;
  width: 150px;
}
.login-box {
  position: absolute;
  left: 550px;
  top: 90px;
  width: 300px;
  height: 400px;
  box-shadow: 1px 3px 5px 2px #f3f3f3;
  padding: 30px;
}
.input-box {
  display: flex;
  flex-direction: column;
}
input {
  height: 50px;
  margin-bottom: 20px;
  border-radius: 5px;
  outline: none;
  padding-left: 20px;
}
.login-btn {
  height: 50px;
  width: inherit;
  border-radius: 5px;
  outline: none;
}
.btn{
  position: absolute;
  bottom: 50px;
}

</style>